<!--
 * @Date: 2021-10-18 16:42:12
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2021-11-26 10:12:02
 * @FilePath: \tianjushi-kanban\src\components\common\Container1.vue
--> 
<template> 

  <div class="conbox" :style="{
      width: isNaN(width) ? width : width + 'px',
      height: isNaN(height) ? height : height + 'px', 
      padding: parseFloat(height)*0.05+'px '+parseFloat(width)*0.08+'px',
    }">
    <h1 :style="{'line-height':parseFloat(height)*0.12+'px', 'font-size': parseFloat(height)*0.06+'px'}">{{title}}</h1>
    <div style="margin-top:10px"> 
    <slot></slot>  
    </div>
  </div>
</template>

<script>
import { AppstoreOutlined } from "@ant-design/icons-vue";

export default {
  components: {
    AppstoreOutlined,
  },
  name: "BoxContainer",
  props: {
    title: {
      type: [String, Number],
      default: "标题",
    },
    width: {
      type: [String, Number],
      default: "100%",
    },
    height: {
      type: [String, Number],
      default: 400,
    },  
  }
  };
</script>

<style lang="css" scoped>
.conbox {
  background: url("~images/border3.png") no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;  
} 
.conbox h1 { text-align: center; color: rgb(22, 219, 219);text-shadow: 3px 3px 20px rgb(22, 219, 219);}

</style>